<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core">

		<ui:composition>
		<!-- start newTripPanel -->
		<div id="newTripPanel" class="panel">
			<h1>#{cpContent['newTrip.newTripPrompt']}</h1>
			
			
			<h:form id="newTripScheduleForm" prependId="false">
			<h:message id="newTripScheduleFormMsg" class="message" for="newTripScheduleForm" binding="#{newTripScheduleForm.message}"></h:message>
				<!-- Section: General Infomation -->
				
				<fieldset>
					<legend>#{cpContent['newTrip.generalInfo']}</legend>
					
					<ol>
						<li>
							<f:ajax event="valueChange" render="tripCodeMsg">
							<h:outputLabel for="tripCode" value="#{cpContent['newTrip.tripCode']}"></h:outputLabel>
							<h:inputText id="tripCode" 
										 value="#{newTripScheduleForm.model.tripCode}"
										 required="true"
										 validator="#{newTripScheduleForm.validateTripCode}">
							
							</h:inputText>
							<h:message id="tripCodeMsg" for="tripCode" errorClass="message error"></h:message>
							</f:ajax>
						</li>
					</ol>
				</fieldset>

				<!-- end section Location -->
			
			
				<!-- Section Location  -->
				<fieldset>
					<legend>Location</legend>
					
					<ol>
						<li>
							<f:ajax event="valueChange" render="fromCityMsg">
							<h:outputLabel for="fromCity" value="#{cpContent['newTrip.fromCity']}"></h:outputLabel>
							<h:inputText id="fromCity" value="#{newTripScheduleForm.routeBean.fromCity}" required="true"></h:inputText>
							<h:message id="fromCityMsg" for="fromCity" errorClass="message error"></h:message>
							</f:ajax>
						</li>
						
						<li>
							<f:ajax event="valueChange" render="toCityMsg">
							<h:outputLabel for="toCity" value="#{cpContent['newTrip.toCity']}"></h:outputLabel>
							<h:inputText id="toCity" value="#{newTripScheduleForm.routeBean.toCity}" required="true"></h:inputText>
							<h:message id="toCityMsg" for="toCity"  errorClass="message error"></h:message>
							</f:ajax>				
						</li>
						
						<li>
							<f:ajax event="valueChange" render="boardingPointMsg">
							<h:outputLabel for="boardingPoint" value="#{cpContent['newTrip.boardingPoint']}"></h:outputLabel>
							<h:inputText id="boardingPoint" value="#{newTripScheduleForm.model.boardingPoint}" required="true"></h:inputText>
							<h:message id="boardingPointMsg" for="boardingPoint" errorClass="message error"></h:message>
							</f:ajax>				
						</li>
						
						<li>
							<f:ajax event="valueChange" render="droppingPointMsg">
							<h:outputLabel for="droppingPoint" value="#{cpContent['newTrip.droppingPoint']}"></h:outputLabel>
							<h:inputText id="droppingPoint" value="#{newTripScheduleForm.model.droppingPoint}" required="true"></h:inputText>
							<h:message id="droppingPointMsg" for="droppingPoint" errorClass="message error"></h:message>
							</f:ajax>		
						</li>
					</ol>
				</fieldset>
				<!-- end section Locatino -->
				
				<!-- Section Bus Type -->
				<fieldset>
					<legend>Bus Type</legend>
					<h:form>
					<ol>
						<li>
							<f:ajax event="valueChange" immediate="true" render="@form">
							<h:outputLabel for="selectControl" value="#{cpContent['newTrip.selectBusType']}"></h:outputLabel>
								<h:selectOneMenu id="selectControl"
												 converter="#{busTypeViewBox}"
												 value="#{newTripScheduleForm.selectedBusType}"
												 valueChangeListener="#{busTypeViewBox.selectChanged}"
												 styleClass="input">
									<f:selectItems value="#{busTypeViewBox.busTypes}"></f:selectItems>
								</h:selectOneMenu>
							</f:ajax>
						</li>
						
						<li>
							<h:outputLabel for="typeName" value="#{cpContent['newTrip.typeName']}"></h:outputLabel>
							<h:inputText id="typeName" readonly="true" binding="#{busTypeViewBox.typeNameInput}"></h:inputText>
						</li>
						
						<li>
							<h:outputLabel for="seatType" value="#{cpContent['newTrip.seatType']}"></h:outputLabel>
							<h:inputText id="seatType" readonly="true" binding="#{busTypeViewBox.seatTypeInput}"></h:inputText>
						</li>
						
						<li>
							<h:outputLabel for="seatCount" value="#{cpContent['newTrip.seatCount']}" ></h:outputLabel>
							<h:inputText id="seatCount" readonly="true" binding="#{busTypeViewBox.seatCountInput}"></h:inputText>
						</li>
					</ol>
					</h:form>	
				</fieldset>
				<!-- end section Bus Type -->
				
				<!-- Section Schedule -->
				<fieldset>
					<legend>Schedule Information</legend>
						<ol>
							<li>
								<f:ajax event="valueChange" render="startingDateMsg">
								<h:outputLabel value="#{cpContent['newTrip.startingDate']}" for="startingDate"></h:outputLabel>
								<h:inputText id="startingDate" value="#{newTripScheduleForm.model.startingDate}">
									<f:convertDateTime pattern="dd/MM/yyyy"></f:convertDateTime>
								</h:inputText>
								<h:message id="startingDateMsg" for="startingDate" errorClass="message error"></h:message>
								</f:ajax>
							</li>
							<li>
								<f:ajax event="valueChange" render="endingDateMsg">
								<h:outputLabel value="#{cpContent['newTrip.endingDate']}" for="endingDate"></h:outputLabel>
								<h:inputText id="endingDate" value="#{newTripScheduleForm.model.endingDate}" required="true">
									<f:convertDateTime pattern="dd/MM/yyyy"></f:convertDateTime>
								</h:inputText>
								<h:message id="endingDateMsg" for="endingDate" errorClass="message error"></h:message>
								</f:ajax>
							</li>
							<li>
								<f:ajax event="valueChange" render="departureTimeMsg">
								<h:outputLabel value="#{cpContent['newTrip.departureTime']}" for="departureTime"></h:outputLabel>
								<h:inputText id="departureTime" value="#{newTripScheduleForm.model.departureTime}" required="true">
									<f:convertDateTime pattern="hh:mm"></f:convertDateTime>
								</h:inputText>
								<h:message id="departureTimeMsg" for="departureTime" errorClass="message error"></h:message>
								</f:ajax>
							</li>
							<li>
								<f:ajax event="valueChange" render="fareMsg">
								<h:outputLabel value="#{cpContent['newTrip.fare']}" for="fare"></h:outputLabel>
								<h:inputText id="fare" value="#{newTripScheduleForm.model.fare}" required="true">
									<f:convertNumber />
								</h:inputText>
								<h:message id="fareMsg" for="fare"  errorClass="message error"></h:message>
								</f:ajax>
							</li>
						</ol>
				</fieldset>
				<!-- end section schedule -->
				
				<fieldset>
					<h:commandButton value="#{cpContent['newTrip.createSchedule']}" action="#{newTripScheduleForm.createNewSchedule}"></h:commandButton>				
				</fieldset>
			</h:form>
		</div>
		<!-- close newTripPanel -->
		</ui:composition>
</html>